
var coinImage = new Image();
coinImage.src = "images/coin-sprite-animation.png";

function gameLoop () {
  window.requestAnimationFrame(gameLoop);
    coin.update();
    coin.render();
   coiner.update();
    coiner.render();
 
}
// Start the game loop as soon as the sprite sheet is loaded
coinImage.addEventListener("load", gameLoop);

function sprite (options) {		
			
   var that = {},
        frameIndex = 0,
        tickCount = 0, 
        x = options.x || 0,
        y = options.y || 0,
        ticksPerFrame = options.ticksPerFrame || 0,
        numberOfFrames = options.numberOfFrames || 1;
        
	
    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    
    that.loop = options.loop;

        that.update = function () {
        tickCount += 1;			
        if (tickCount > ticksPerFrame) {
        	tickCount = 0;
       	// If the current frame index is in range
            if (frameIndex < numberOfFrames - 1) {	

            // Go to the next frame
            frameIndex += 1; 
             } else if (that.loop) {
                frameIndex = 0;
       }
       else if(frameIndex = 0 || frameIndex != 0){}
       
       }
    };

   
    that.render = function () { 
    		
    		// Clear the canvas
    that.context.clearRect(x, y, that.width, that.height);

    // Draw the animation     
    that.context.drawImage( 
    	that.image,          
		frameIndex * that.width / numberOfFrames,
           0,
           that.width / numberOfFrames, 
           that.height,
           x, 
           y,
           that.width / numberOfFrames,
 			that.height);
 			
 };
  
    return that;
  
}


var canvas = document.getElementById("coinAnimation");
canvas.width = 900;
canvas.height = 900;

canvas.addEventListener("mousedown",tap);
function tap(e){
	tapX = e.targetTouches ? e.targetTouches[0].pageX:e.pageX,
	tapY = e.targetTouches ? e.targetTouches[0].pageY:e.pageY;
	if(tapX >= coin.x && tapX <= coin.x+100){
		if(tapY >= coin.y && tapY <= coin.y+100){
			coin.x = 1000,
			coin.y = 1000;
		}
	coin.render();
	}
	if(tapX >= coiner.x && tapX <= coiner.x+1000){
		if(tapY >= coiner.y && tapY <= coiner.y+1000){
			coiner.x = 1000,
			coiner.y = 1000;
		}
	coiner.render();
	}
	else{}
	
};

var coin = sprite({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 1000,
    image: coinImage,
    numberOfFrames: 10,
    ticksPerFrame: 1,
    x:Math.random()*500,
    y: Math.random()*500
});

var coiner = sprite({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 1000,
    image: coinImage,
    numberOfFrames: 10,
    ticksPerFrame1: 10,
    x: Math.random()*700,
    y: Math.random()*700
});

